import { CONTAINER_TYPE, ComponentTreeNode } from "@illa-public/public-types"
import { v4 } from "uuid"

export const HEADER_ADD_NEW_BUTTON: ComponentTreeNode = {
  version: 0,
  displayName: "button3",
  parentNode: "bodySection1-bodySectionContainer1",
  showName: "button",
  childrenNode: [],
  type: "BUTTON_WIDGET",
  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
  h: 5,
  w: 4,
  minH: 3,
  minW: 1,
  x: 28,
  y: 1,
  z: 0,
  props: {
    $dynamicAttrPaths: [],
    colorScheme: "blue",
    events: [
      {
        actionType: "widget",
        eventType: "click",
        id: v4(),
        key: "View 2",
        widgetID: "container2",
        widgetMethod: "setCurrentViewKey",
      },
    ],
    hidden: false,
    loading: "",
    text: "Add new",
    variant: "fill",
  },
}

export const HEADER_INPUT_NODE: ComponentTreeNode = {
  version: 0,
  displayName: "input1",
  parentNode: "bodySection1-bodySectionContainer1",
  showName: "input",
  childrenNode: [],
  type: "INPUT_WIDGET",
  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
  h: 5,
  w: 6,
  minH: 3,
  minW: 1,
  x: 22,
  y: 1,
  z: 0,
  props: {
    $dynamicAttrPaths: ["labelWidth", "formDataKey", "showVisibleButton"],
    colorScheme: "blue",
    formDataKey: "{{input1.displayName}}",
    hidden: false,
    label: "Label",
    labelAlign: "left",
    labelHidden: true,
    labelPosition: "left",
    labelWidth: "{{33}}",
    placeholder: "Search",
    showVisibleButton: "{{true}}",
    type: "search",
    value: "",
  },
}

export const HEADER_TITLE_TEXT_NODE: ComponentTreeNode = {
  version: 0,
  displayName: "text1",
  parentNode: "bodySection1-bodySectionContainer1",
  showName: "text",
  childrenNode: [],
  type: "TEXT_WIDGET",
  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
  h: 6,
  w: 21,
  minH: 3,
  minW: 1,
  x: 0,
  y: 0,
  z: 0,
  props: {
    $dynamicAttrPaths: [],
    colorScheme: "#161419ff",
    disableMarkdown: false,
    dynamicHeight: "auto",
    fs: "14px",
    hidden: false,
    horizontalAlign: "start",
    resizeDirection: "HORIZONTAL",
    value: "## CRUD App",
    verticalAlign: "center",
    weight: 400,
  },
}

// edit form
export const FROM_EDIT_TITLE_NODE: ComponentTreeNode = {
  version: 0,
  displayName: "text2",
  parentNode: "canvas4",
  showName: "text",
  childrenNode: [],
  type: "TEXT_WIDGET",
  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
  h: 5,
  w: 32,
  minH: 3,
  minW: 1,
  x: 0,
  y: 0,
  z: 0,
  props: {
    $dynamicAttrPaths: [],
    colorScheme: "grayBlue",
    disableMarkdown: false,
    dynamicHeight: "fixed",
    fs: "14px",
    hidden: false,
    horizontalAlign: "start",
    resizeDirection: "ALL",
    value: "#### Edit",
    verticalAlign: "center",
    weight: 400,
  },
}

export const FORM_EDIT_TITLE_DIVIDER_NODE: ComponentTreeNode = {
  version: 0,
  displayName: "divider2",
  parentNode: "canvas4",
  showName: "divider",
  childrenNode: [],
  type: "DIVIDER_WIDGET",
  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
  h: 5,
  w: 32,
  minH: 3,
  minW: 1,
  x: 0,
  y: 5,
  z: 0,
  props: {
    $dynamicAttrPaths: [],
    colorScheme: "grayBlue",
    fs: "14px",
    hidden: false,
  },
}

// add form
export const FORM_ADD_TITLE_NODE: ComponentTreeNode = {
  version: 0,
  displayName: "text4",
  parentNode: "canvas5",
  showName: "text",
  childrenNode: [],
  type: "TEXT_WIDGET",
  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
  h: 5,
  w: 32,
  minH: 3,
  minW: 1,
  x: 0,
  y: 0,
  z: 0,
  props: {
    $dynamicAttrPaths: [],
    colorScheme: "grayBlue",
    disableMarkdown: false,
    dynamicHeight: "fixed",
    fs: "14px",
    hidden: false,
    horizontalAlign: "start",
    resizeDirection: "ALL",
    value: "#### Add new",
    verticalAlign: "center",
    weight: 400,
  },
}

export const FROM_ADD_TITLE_DIVIDER_NODE: ComponentTreeNode = {
  version: 0,
  displayName: "divider3",
  parentNode: "canvas5",
  showName: "divider",
  childrenNode: [],
  type: "DIVIDER_WIDGET",
  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
  h: 5,
  w: 32,
  minH: 3,
  minW: 1,
  x: 0,
  y: 5,
  z: 0,
  props: {
    $dynamicAttrPaths: [],
    colorScheme: "grayBlue",
    fs: "14px",
    hidden: false,
  },
}
